<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="div1">
    <input type="text" v-model="name">
    <h3>{{name}}</h3>
    <hr>

    <input type="text" v-model="age">
    <h3>{{age}}</h3>
    <hr>

    <input type="text" v-model="user.name">
    <h3>{{user.name}}</h3>
</div>

<script>
    var vm=new Vue({
        el:'#div1',
        data:{
            name:'tom',
            age:23,
            user:{
                id:1001,
                name:'alice'
            }
        },
        watch:{ //方式2：使用vue实例提供的watch选项
            age:(newValue,oldValue) => {
                console.log('age被修改啦，原值：'+oldValue+'，新值：'+newValue);
            },
            user:{
                handler:(newValue,oldValue) => {
                    console.log('user被修改啦，原值：'+oldValue.name+'，新值：'+newValue.name);
                },
                deep:true //深度监视，当对象中的属性发生变化时也会监视
            }
        }
    });

    //方式1：使用vue实例提供的$watch()方法
    vm.$watch('name',function(newValue,oldValue){
        console.log('name被修改啦，原值：'+oldValue+'，新值：'+newValue);
    });

</script>

</body>

</html>